<style>
  .rp-container {
    padding-left:10px;
    padding-right:10px;
  }
  .rp-background-lightgray {
    background-color:rgb(240, 240, 240);
  }
  .rp-record {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(240, 240, 240) ;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .rp-record .avatar {
    width: 50px;
    border-radius: 3px;
  }
  .rp-record .info {
    display: inline-block;
    width: 100%;
  }
  .rp-record .desc {
    display:inline-block;
    margin-left: 1em;
  }
  .rp-record .datetime {
    color: rgb(200, 200, 200);
  }
  .rp-record .amount {
    float: right;
  }
 #unpaid .unpaid-alert .unpaid-subtitle{
    color: #999;
    text-align: center;
    width: 13rem;
    margin: .6rem auto
}
</style>
<div class="fui-page fui-page-current  fui-page-current rp-background-lightgray">
  <div class="" style="height:19rem;background-color:white">
    <div style="color:#ffcc00;box-shadow:0 1px 2px gray;padding: 0 3px;text-align:center;margin-bottom:1rem;height:16rem;background-color:#e52600;border-bottom-right-radius:50% 70px;border-bottom-left-radius:50% 70px;">
      <div style="text-align: center;padding-top:70px;">
        <div style="">
		  <div>
          <img ng-src="{{tomedia(pagedata.sender.avatar) ||'../core/resource/images/nopic.jpg'}}" style="display:inline-block;border-radius:5;width:3rem;height:3rem;margin:0;padding:0">
          </div>
		  <span style="padding-left:5px;vertical-align:middle;font-weight:bold;line-height:24px;font-size:20px;">{{pagedata.sender.nickname}}的{{pagedata.typename || '红包'}}</span>
        </div>
        <div style="margin: 10px;"><small>{{pagedata.game.title}}</small></div>
        <div style="margin-top:1rem;">
          <span style="font-size: 2em;
                       vertical-align: top;
                       padding-right: 0.5em;
                       font-weight: bold;">¥</span>
          <span style="line-height:1em;font-size:4em;">{{pagedata.red.myfee ||'0.00'}}</span></div>
		  <div ng-if="pagedata.red.myfee>0" ng-click="pagedata.showfeelog=true"><small>查看明细</small> <i class="icon icon-browse"></i></div>
        <div ng-if="!pagedata.red.isgetred && pagedata.red.cangetred==1"><small>立即领取{{pagedata.typename || '红包'}}&gt;</small></div>
		<div ng-if="pagedata.red.isgetred>0"><small>{{pagedata.typename || '红包'}}已存入余额 &gt;</small></div>
		<div ng-if="!pagedata.red.isgetred && pagedata.red.cangetred!=1"><small>满{{pagedata.red.red_man}},可领取{{pagedata.typename || '红包'}}</small></div>
	  </div>
    </div>
	<div style="text-align: center;">
      <span class="r-icon" ng-if="pagedata.red.canshare" onclick="$('#showsharecover').modal();" style="color:red">
        <span style="font-size:1.2em;">马上邀请好友领{{pagedata.typename || '红包'}}</span>
        <i class="icon icon-skip" style="padding:0.2rem;color:red;font-size:0.8rem"></i>
      </span>
    </div>
</div>
<div style="background-color:white;">
   <div style="border-bottom:1px solid #f0f0f0;">
		<div class="rp-container" style="margin-top:10px;">
			<div style="padding-top:0.5em;padding-bottom:0.5em;">
			已领取{{pagedata.red.get_count}}/{{pagedata.red.total}}个{{pagedata.typename || '红包'}}，共{{pagedata.red.allgetfee}}/{{pagedata.red.total_fee}}元
			</div>
		</div>
    </div>
  <div class="rp-container"  style="background-color:white"> 
    <div ng-repeat="x in pagedata.list" class="rp-record">
      <img src="{{x.member.avatar}}" class="avatar">
      <span class="info" style="vertical-align: center">
        <span class="desc">
          <span class="nickname">{{x.member.nickname}}</span><br/>
          <span class="datetime">{{x.createtime | date:'HH:mm:ss'}}</span>
        </span>
        <span class="amount">{{x.allfee}}元 (<span class="red">{{x.isgetred?'已领取':'待领取'}}</span>)</span>
      </span>
    </div>
  </div>  
</div>
<!--分享弹层-->
<div id="showsharecover" class="modal fade" tabindex="-1" style="z-index:99999;display:none;">
    <div class="modal-dialog" style="width:100%;left:0;top:0">
      <div id="cover">
        <div class='fui-mask-m visible'></div>
        <div class='arrow'></div>
        <div class='content'>请点击右上角<br/>通过【发送给朋友】<br/>转发给好友哦</div>
      </div>
    </div>
</div>
<!-- {{pagedata.typename || '红包'}}弹层 -->
<div ng-if="pagedata.showredpage" class="popup">
	<div class="popup-body">
		<div class="popup-center" style="background:none;color:#ffcc00">
			  <div style="height:380px;background-color:#c70000;border-radius:8px;text-align:center">
				<div style="height:300px;background-color:#e52600;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:50% 40px;border-bottom-right-radius:50% 40px;box-shadow:0 1px 2px brown">
				  <div class="js-who" style="padding-top:30%;padding-bottom:5px;">
					<div>
					<img class="js-avatar" ng-src="{{tomedia(pagedata.sender.avatar) ||'../core/resource/images/nopic.jpg'}}" width="20px" height="20px" style="display:inline-block;border-radius:3px;margin-right:5px;" />
					</div>
					<span class="js-text" style="">{{pagedata.sender.nickname}}的{{pagedata.typename || '红包'}}</span>
				  </div>	
				  <div class="js-title" style="font-size:1.3em;font-weight:bold;">{{pagedata.game.title}}</div>
				</div>
				<div style="display:inline-block;position:relative;top:-40px;background-color:#FFCC66;border-radius:50%;width:80px;height:80px;line-height:80px"
					 ng-click="pagedata.getred()">
					<span style="font-size:32px;color:#e52600;">開</span>
				</div>
			  </div>			
			  <div style="text-align:center;margin-top:10px">
				<i class="icon icon-cuowu" ng-click="pagedata.showredpage=false" style="font-size:1.5rem;"></i>
			  </div>
		 </div>
	</div>
</div>
<div ng-if="pagedata.showisgetfee" id="unpaid" >
    <div class="unpaid-alert">
        <div class="unpaid-title" style="margin-top:2rem;font-size:0.9rem;color:#f60">恭喜您抢到{{pagedata.typename || '红包'}}</div>
		<div class="unpaid-subtitle bold" style="font-size:1rem;color:red">{{pagedata.getfee || '0.00'}}{{pagedata.game.pluginset.rewardtype==0?'个':'元'}}</div>
        <div class="unpaid-subtitle" style="font-size:0.8rem;">
			<span style="color:red">活动介绍：</span>
			<span style="color:red">{{pagedata.game.pluginset.desc || '暂无活动介绍！'}}</span>
		</div>
		<div class="unpaid-subtitle">{{pagedata.typename || '红包'}}总额仅剩余{{pagedata.red.lastfee|| '0.00'}}{{pagedata.game.pluginset.rewardtype==0?'个':'元'}}，先到先得（以提现成功为准），活动经官方认证，真实有效。</div>
        <a id="btn-pay" ng-click="access_json('jy_red_pin/game//id='+pagedata.game.id);" class="btn btn-danger disable block">我知道了</a>
    </div>
</div>
<div ng-if="pagedata.showfeelog" class="popup">
	<div class="popup-body">
		<div class="popup-center" style="padding-bottom:0.5rem">
			<i class="closed icon icon-cuowu" ng-click="pagedata.showfeelog=false"></i>
			<div class="unpaid-title c" style="margin-top:2rem;font-size:0.9rem;color:#f60">恭喜您已拼到{{pagedata.typename || '红包'}}</div>
			<div class="unpaid-subtitle c bold" style="font-size:1rem;color:red">{{pagedata.red.myfee || '0.00'}}{{pagedata.game.pluginset.rewardtype==0?'个':'元'}}</div>
			<div class="rp-container"  style="background-color:white">
			<div class="rp-record">
			  <img src="{{pagedata.myfeelog.member.avatar}}" class="avatar">
			  <span class="info" style="vertical-align: center">
				<span class="desc">
				  <span class="nickname">{{pagedata.myfeelog.member.nickname}}</span><br/>
				  <span class="datetime">{{pagedata.myfeelog.createtime | date:'HH:mm:ss'}}</span>
				</span>
				<span class="amount">{{pagedata.myfeelog.fee}}元</span>
			  </span>
			</div>
			<div ng-repeat="x in pagedata.myfeelist" class="rp-record">
			  <img src="{{x.member.avatar}}" class="avatar">
			  <span class="info" style="vertical-align: center">
				<span class="desc">
				  <span class="nickname">{{x.member.nickname}}</span><br/>
				  <span class="datetime">{{x.createtime | date:'HH:mm:ss'}}</span>
				</span>
				<span class="amount">{{x.fee}}元</span>
			  </span>
			</div>
		  </div> 
		</div>
	</div>
</div>
<script>
// {{pagedata.typename || '红包'}}弹层
if(!scope.pagedata.red.isfeered){
	scope.pagedata.showredpage=true
}
scope.pagedata.getred=function(){
	scope.post_json('jy_red_pin/game/getred/',{'id':scope.pagedata.game.id},function(res){
		scope.pagedata.showisgetfee=1
		scope.pagedata.getfee=res.fee
		scope.$evalAsync();
	});
}
scope.pagedata.getfeelog=function(){
	scope.get('jy_weishop/game.detail/getfeelog/gameid='+scope.pagedata.game.id,function(res){
		scope.pagedata.myfeelist=res.list
		scope.pagedata.myfeelog=res.myfeelog
		scope.$evalAsync();
	});
}
scope.pagedata.getfeelog();
scope.tool.get_list('jy_weishop/game.detail/getfeelog/noshare=1&gameid='+scope.pagedata.game.id,true);
scope.pagedata.scroll_bottom=function(){
	scope.tool.get_list('jy_weishop/game.detail/getfeelog/noshare=1&gameid='+scope.pagedata.game.id);
}
</script>